<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-XMLHttpRequest-数据提交</title>
</head>
<body>
    <button class="btn">点击注册</button>
    <script>
        // 需求：使用 XHR 进行数据提交 - 完成注册用户功能
        document.querySelector('.btn').addEventListener('click',() => {
            // 1.实例化 XHR对象
            const xhr = new XMLHttpRequest()
            // 2. 设置请求方法和地址
            xhr.open('post','https://hmajax.itheima.net/api/register')
            // 3. 监听事件，接收并使用数据
            xhr.addEventListener('loadend',() =>{
                console.log(xhr.response)
            })

            // 4. 设置请求头信息（根据接口文档设置conent-type） content 内容 Type类型 application 应用
            xhr.setRequestHeader('Content-Type','application/json')

            // 5.请求体发送数据（和请求头设置的一致）
            // 方案1：自己写JSON
            // 方案2：JS对象 -> 转成JSON(推荐！) - JSON.stringify
            const obj = {
                username:'铎铎6666666',
                password:'123456'
            }
            const data = JSON.stringify(obj)
            xhr.send(data)
        })
    </script>
</body>
</html>